<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vueRouter | 一名前端er的学习笔记</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/xiaoliantongxue/img/favicon.ico">
    <link rel="stylesheet" href="/xiaoliantongxue/css/style.css">
    <script charset="utf-8" src="/xiaoliantongxue/js/custom.js"></script>
    <meta name="description" content="没有奇迹，只有你努力的轨迹；没有运气，只有你坚持的勇气。">
    
    <link rel="preload" href="/xiaoliantongxue/assets/css/0.styles.95d100bd.css" as="style"><link rel="preload" href="/xiaoliantongxue/assets/js/app.ebd9f252.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/4.d19b4706.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/1.7b0744f8.js" as="script"><link rel="preload" href="/xiaoliantongxue/assets/js/17.33ec3468.js" as="script"><link rel="prefetch" href="/xiaoliantongxue/assets/js/10.7f85c175.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/11.23178731.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/12.3a600697.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/13.d26dba6e.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/14.ba028ae5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/15.59927da5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/16.c77c944a.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/18.0721048c.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/19.94ad9b06.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/20.5990745a.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/21.1373c18d.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/22.5e7f78de.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/23.6fe33379.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/24.a3d500e5.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/25.e79df9da.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/26.b99b96b7.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/27.d5410a58.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/5.b89681ba.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/6.c8982d95.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/7.71bebb6e.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/8.35bba38f.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/9.b5788ac6.js"><link rel="prefetch" href="/xiaoliantongxue/assets/js/vendors~flowchart.dbbf4bfe.js">
    <link rel="stylesheet" href="/xiaoliantongxue/assets/css/0.styles.95d100bd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div><div class="theme-container" data-v-4698c43e><div data-v-4698c43e><div id="loader-wrapper" class="loading-wrapper" data-v-1c4f0192 data-v-4698c43e data-v-4698c43e><div class="loader-main" data-v-1c4f0192><div data-v-1c4f0192></div><div data-v-1c4f0192></div><div data-v-1c4f0192></div><div data-v-1c4f0192></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-6cbeab0a data-v-4698c43e data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>一名前端er的学习笔记</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>小连同学</span>
            
          <span data-v-6cbeab0a>2022 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-4698c43e><header class="navbar" data-v-4698c43e><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xiaoliantongxue/" class="home-link router-link-active"><!----> <span class="site-name">一名前端er的学习笔记</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xiaoliantongxue/resources/编程指南/" class="nav-link"><i class="iconfont reco-eye"></i>
  编程指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>
      前端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端基础</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/html&amp;css/html&amp;css.html" class="nav-link"><i class="iconfont undefined"></i>
  Html&amp;css
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/JavaScript/JavaScript.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html" class="nav-link"><i class="iconfont undefined"></i>
  ES6
</a></li></ul></li><li class="dropdown-item"><h4>Vue框架</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue基础/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue核心基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue进阶/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件开发
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/cli与axio请求/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Cli与Axios
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue Router
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vueX/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  vueX
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      后端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Java</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/java基础/javase.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaSE
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/MyBatis/MyBatis.html" class="nav-link"><i class="iconfont undefined"></i>
  MyBatis
</a></li></ul></li><li class="dropdown-item"><h4>PHP</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/php基础/php基础.html" class="nav-link"><i class="iconfont undefined"></i>
  PHP基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/thinkPHP/tp.html" class="nav-link"><i class="iconfont undefined"></i>
  thinkPHP
</a></li></ul></li><li class="dropdown-item"><h4>MySql</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/mySql/mySql.html" class="nav-link"><i class="iconfont undefined"></i>
  MySql
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-blog"></i>
      随笔
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/关于作者/aboutMe.html" class="nav-link"><i class="iconfont undefined"></i>
  关于作者
</a></li><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/生活分享/life.html" class="nav-link"><i class="iconfont undefined"></i>
  京城少爷“阿辉”
</a></li></ul></div></div><div class="nav-item"><a href="/xiaoliantongxue/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-4698c43e></div> <aside class="sidebar" data-v-4698c43e><div class="personal-info-wrapper" data-v-6c8ffc9c><img src="/xiaoliantongxue/avatar.png" alt="author-avatar" class="personal-img" data-v-6c8ffc9c> <h3 class="name" data-v-6c8ffc9c>
    小连同学
  </h3> <div class="num" data-v-6c8ffc9c><div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>15</h3> <h6 data-v-6c8ffc9c>文章</h6></div> <div data-v-6c8ffc9c><h3 data-v-6c8ffc9c>13</h3> <h6 data-v-6c8ffc9c>标签</h6></div></div> <hr data-v-6c8ffc9c></div> <nav class="nav-links"><div class="nav-item"><a href="/xiaoliantongxue/resources/编程指南/" class="nav-link"><i class="iconfont reco-eye"></i>
  编程指南
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>
      前端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端基础</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/html&amp;css/html&amp;css.html" class="nav-link"><i class="iconfont undefined"></i>
  Html&amp;css
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/JavaScript/JavaScript.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/基础/ES6/ES6.html" class="nav-link"><i class="iconfont undefined"></i>
  ES6
</a></li></ul></li><li class="dropdown-item"><h4>Vue框架</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue基础/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue核心基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue进阶/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件开发
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/cli与axio请求/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Cli与Axios
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  Vue Router
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vueX/vue01.html" class="nav-link"><i class="iconfont undefined"></i>
  vueX
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      后端学习
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Java</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/java基础/javase.html" class="nav-link"><i class="iconfont undefined"></i>
  JavaSE
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/java/MyBatis/MyBatis.html" class="nav-link"><i class="iconfont undefined"></i>
  MyBatis
</a></li></ul></li><li class="dropdown-item"><h4>PHP</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/php基础/php基础.html" class="nav-link"><i class="iconfont undefined"></i>
  PHP基础
</a></li><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/php/thinkPHP/tp.html" class="nav-link"><i class="iconfont undefined"></i>
  thinkPHP
</a></li></ul></li><li class="dropdown-item"><h4>MySql</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/xiaoliantongxue/resources/后端学习/mySql/mySql.html" class="nav-link"><i class="iconfont undefined"></i>
  MySql
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-blog"></i>
      随笔
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/关于作者/aboutMe.html" class="nav-link"><i class="iconfont undefined"></i>
  关于作者
</a></li><li class="dropdown-item"><!----> <a href="/xiaoliantongxue/resources/随笔/生活分享/life.html" class="nav-link"><i class="iconfont undefined"></i>
  京城少爷“阿辉”
</a></li></ul></div></div><div class="nav-item"><a href="/xiaoliantongxue/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>vue Router</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html" class="active sidebar-link">vueRouter</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#vue-router" class="sidebar-link">Vue Router</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由" class="sidebar-link">路由</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#单页面应用程序-spa" class="sidebar-link">单页面应用程序 SPA</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#vue-router-初体验" class="sidebar-link">vue-router 初体验</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#声明式导航" class="sidebar-link">声明式导航</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由高亮" class="sidebar-link">路由高亮</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由重定向" class="sidebar-link">路由重定向</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#嵌套路由" class="sidebar-link">嵌套路由</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#编程式导航" class="sidebar-link">编程式导航</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#命名路由" class="sidebar-link">命名路由</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由传参" class="sidebar-link">路由传参</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由元信息-meta" class="sidebar-link">路由元信息 meta</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#路由守卫" class="sidebar-link">路由守卫</a></li><li class="sidebar-sub-header"><a href="/xiaoliantongxue/resources/前端学习/vue框架/vue Router/vue01.html#vue-router-4-x" class="sidebar-link">vue-router 4.x</a></li></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-6cbeab0a data-v-4698c43e><h3 class="title" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a>vueRouter</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><input type="password" value="" data-v-6cbeab0a> <span data-v-6cbeab0a>Konck! Knock!</span> <button data-v-6cbeab0a>OK</button></label> <div class="footer" style="display:none;" data-v-6cbeab0a data-v-6cbeab0a><span data-v-6cbeab0a><i class="iconfont reco-theme" data-v-6cbeab0a></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-6cbeab0a>vuePress-theme-reco</a></span> <span data-v-6cbeab0a><i class="iconfont reco-copyright" data-v-6cbeab0a></i> <a data-v-6cbeab0a><span data-v-6cbeab0a>小连同学</span>
            
          <span data-v-6cbeab0a>2022 - </span>
          2023
        </a></span></div></div> <div data-v-4698c43e><main class="page"><!----> <div class="page-title" style="display:none;"><h1>vueRouter</h1> <hr> <div data-v-484a899e><i class="iconfont reco-account" data-v-484a899e><span data-v-484a899e>小连同学</span></i> <i class="iconfont reco-date" data-v-484a899e><span data-v-484a899e>2023-04-18 12:44:15</span></i> <!----> <i class="iconfont reco-tag tags" data-v-484a899e><span class="tag-item" data-v-484a899e>
      vue
    </span><span class="tag-item" data-v-484a899e>
      js
    </span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><div class="custom-block danger"><p class="custom-block-title">说明</p> <p>前端路由即地址和组件之间的对应关系（以下已哈希模式为例）。</p></div> <h2 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h2> <p><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">官网传送门<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="路由"><a href="#路由" class="header-anchor">#</a> 路由</h2> <h3 id="何为路由"><a href="#何为路由" class="header-anchor">#</a> 何为路由</h3> <ul><li>一组路由即一组映射关系（key-value）</li> <li>key 为路径，value 可能是 function 或 component</li></ul> <h3 id="前端路由"><a href="#前端路由" class="header-anchor">#</a> 前端路由</h3> <p>前端路由即地址和组件之间的对应关系（以下已哈希模式为例）。</p> <p>前端路由简易工作方式：</p> <ol><li>用户点击了页面上的路由链接</li> <li>URL 地址的 Hash 值发生变化</li> <li>前端路由监听到 Hash 值的变化</li> <li>前端路由渲染 Hash 地址对应的组件</li></ol> <p>实现简易的前端路由：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- a 链接添加对应 Hash 值 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#/movie<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Movie<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 动态渲染组件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>compName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'App'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">compName</span><span class="token operator">:</span> <span class="token string">'Home'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 监听 Hash 地址改变，切换组件</span>
    window<span class="token punctuation">.</span><span class="token function-variable function">onhashchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">switch</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>hash<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span><span class="token operator">:</span> <span class="token string">'#/home'</span><span class="token operator">:</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>compName <span class="token operator">=</span> <span class="token string">'Home'</span>
          <span class="token keyword">break</span>
        <span class="token keyword">case</span><span class="token operator">:</span> <span class="token string">'#/movie'</span><span class="token operator">:</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>compName <span class="token operator">=</span> <span class="token string">'Movie'</span>
          <span class="token keyword">break</span>
        <span class="token keyword">case</span><span class="token operator">:</span> <span class="token string">'#/about'</span><span class="token operator">:</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>compName <span class="token operator">=</span> <span class="token string">'About'</span>
          <span class="token keyword">break</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="后端路由"><a href="#后端路由" class="header-anchor">#</a> 后端路由</h3> <ul><li>后端路由是指请求方式、请求地址与 <code>function</code> 处理函数之间的对应关系</li> <li>服务器收到一个请求，根据请求方式、路径匹配对应的函数处理请求，返回响应数据</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/userlist'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="单页面应用程序-spa"><a href="#单页面应用程序-spa" class="header-anchor">#</a> 单页面应用程序 SPA</h2> <p>单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换 HTML 的内容，从而实现页面与用户的交互。</p> <p>SPA 的优点：</p> <ul><li>良好的交互体验
<ul><li>内容的改变不需要重新加载整个页面</li> <li>数据通过 <code>Ajax</code> 异步获取</li> <li>没有页面跳转，不会出现白屏现象</li></ul></li> <li>良好的前后盾工作分离模式
<ul><li>后端专注于提供 API 接口，更易实现接口复用</li> <li>前端专注页面渲染，更利于前端工程化发展</li></ul></li> <li>减轻服务器压力
<ul><li>服务器只提供数据，不负责页面的合成与逻辑处理，吞吐能力会提高</li></ul></li></ul> <p>SPA 的缺点：</p> <ul><li>首屏加载慢：可使用路由懒加载、代码压缩、CDN 加速、网络传输压缩</li> <li>不利于 SEO ：SSR 服务器端渲染</li></ul> <h2 id="vue-router-初体验"><a href="#vue-router-初体验" class="header-anchor">#</a> vue-router 初体验</h2> <p>安装 <code>vue-router</code>：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> vue-router@3.5.2 -S
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>创建路由模块，在 <code>src</code> 源代码目录下，新建 <code>router/index.js</code> 路由模块，初始化代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'@/component/Home.vue'</span>
<span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">'@/component/About.vue'</span>
<span class="token keyword">import</span> Movie <span class="token keyword">from</span> <span class="token string">'@/component/Movie.vue'</span>

<span class="token comment">// 把 VueRouter 安装为 Vue 的插件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>

<span class="token comment">// 路由匹配规则</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Home <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Movie <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

<span class="token comment">// 创建路由实例对象</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>在 <code>main.js</code> 文件中导入并挂载路由模块：</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router/index.js'</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  router<span class="token punctuation">,</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">h</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>在组件中声明路由链接和占位符：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 路由链接 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>关于<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/movie<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>电影<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 路由出口 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>注意事项：</p> <ul><li>组件分为路由组件和一般组件，前者放在 <code>pages(或views)</code> 文件夹，后者放在 <code>components</code> 文件夹</li> <li>每个组件都有 <code>$route</code> 属性，存储着组件的路由规则信息</li> <li><code>$router</code> 是路由器对象，整个 SPA 只有一个</li></ul> <h2 id="声明式导航"><a href="#声明式导航" class="header-anchor">#</a> 声明式导航</h2> <p><code>&lt;router-link&gt;</code> 4 个常用属性：</p> <ol><li><code>to</code> 属性</li></ol> <ul><li>用于指定跳转路由</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="2"><li><code>tag</code> 属性</li></ol> <ul><li>指明 <code>&lt;router-link&gt;</code> 最终被渲染为何种标签，默认是 a 标签</li> <li>渲染为其他标签也会监听点击，触发导航</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>li<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tag<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>tag<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li><code>replace</code> 属性</li></ol> <ul><li>路由跳转不会增加新的历史记录，而是替换当前历史记录</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">replace</span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="4"><li><code>active-class</code> 属性</li></ol> <ul><li>指明路由被激活时添加的类名，默认为 <code>router-link-active</code></li> <li>详见<a href="#%E8%B7%AF%E7%94%B1%E9%AB%98%E4%BA%AE">路由高亮</a></li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="路由高亮"><a href="#路由高亮" class="header-anchor">#</a> 路由高亮</h2> <p>被激活的路由链接，默认会添加 <code>router-link-active</code> 的类名。可据此为激活的路由链接设置高亮的样式：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.router-link-active</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>定义路由模块时可以自定义路由链接被激活时添加的类名：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 默认的 router-link-active 会被覆盖</span>
  <span class="token literal-property property">linkActiveClass</span><span class="token operator">:</span> <span class="token string">'active-hello'</span><span class="token punctuation">,</span>
  routes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>声明路由链接时也可用 <code>active-class</code> 属性自定义激活类名：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- router-link-active 会被覆盖为 active --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">active-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="路由重定向"><a href="#路由重定向" class="header-anchor">#</a> 路由重定向</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token comment">// 访问 / 跳转到 /home</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">redirect</span><span class="token operator">:</span> <span class="token string">'/home'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'Home'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'About'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'Movie'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="嵌套路由"><a href="#嵌套路由" class="header-anchor">#</a> 嵌套路由</h2> <p><code>About</code> 组件中声明子路由链接和子路由占位符：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>about-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 要把父路由寫上 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about/tab1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tab1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about/tab2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tab2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>通过 <code>children</code> 属性声明子路由规则：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'About'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token comment">// 注意不要写成 /tab1</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'tab1'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Tab1 <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'tab2'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Tab2 <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="编程式导航"><a href="#编程式导航" class="header-anchor">#</a> 编程式导航</h2> <p>声明式导航：</p> <ul><li>通过点击链接实现导航</li> <li>如普通网页点击 <code>a</code> 链接，<code>vue</code> 点击 <code>&lt;router-link&gt;</code></li></ul> <p>编程式导航：</p> <ul><li>通过调用 API 实现导航</li> <li>普通网页通过 <code>location.href</code> 的方式跳转页面也是编程式导航</li></ul> <p><code>vue-router</code> 中实现编程式导航的 API ：</p> <ul><li><code>this.$router.push('hash地址')</code> ：跳转到指定页面，并增加一条历史记录</li> <li><code>this.$router.replace('hash地址')</code> ：跳转页面，但不会新增历史记录，而是替换当前的历史记录</li> <li><code>this.$router.go(数值)</code> ：历史记录前进或后退，相当于点击浏览器前进后退箭头</li> <li><code>this.$router.forward()</code> ：前进一步</li> <li><code>this.$router.back()</code> ：后退一步</li></ul> <h2 id="命名路由"><a href="#命名路由" class="header-anchor">#</a> 命名路由</h2> <p>给路由命名，某些情况可简化路由跳转写法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> About<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ name: <span class="token punctuation">'</span>about<span class="token punctuation">'</span>} <span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ name: <span class="token punctuation">'</span>about<span class="token punctuation">'</span>, query: { id: 1, title: <span class="token punctuation">'</span>hello<span class="token punctuation">'</span> }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="路由传参"><a href="#路由传参" class="header-anchor">#</a> 路由传参</h2> <h3 id="query-参数"><a href="#query-参数" class="header-anchor">#</a> query 参数</h3> <p>传递参数：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 字符串写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>`/home/detail?id=${id}&amp;title=${title}`<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>字符串写法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 对象写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
    path: <span class="token punctuation">'</span>/home/detail<span class="token punctuation">'</span>,
    query: {
      id: 1,
      title: <span class="token punctuation">'</span>hello<span class="token punctuation">'</span>,
    }
  }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  对象写法
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/home/detail?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;title=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home/detail'</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'query'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>接收参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>title
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="params-参数-动态路由"><a href="#params-参数-动态路由" class="header-anchor">#</a> params 参数（动态路由）</h3> <p>动态路由是把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。</p> <p>声明 params 参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 定义动态路由参数</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie/:id/:age'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Movie <span class="token punctuation">}</span>

<span class="token comment">// 以下类似的路由规则都能合并为上述规则，复用性得到提高</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie/1/21'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Movie <span class="token punctuation">}</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie/2/22'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Movie <span class="token punctuation">}</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie/3/23'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Movie <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>传递 params 参数：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/movie/1/21<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>字符串写法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 对象写法只能和 name 搭配使用，不能和 path 搭配 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
  name: <span class="token punctuation">'</span>movie<span class="token punctuation">'</span>,
  params: {
    id: 1,
    age: 21
  }
}<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  对象写法
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- query 和 params 可以一起用 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>`/movie/1/21?id=${id}`<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>字符串写法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
    name:<span class="token punctuation">'</span>movie<span class="token punctuation">'</span>, 
    params: {id:1, age:21}, 
    query: {school: <span class="token punctuation">'</span>love<span class="token punctuation">'</span>}
  }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  对象写法
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/movie/1/21?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'movie'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">school</span><span class="token operator">:</span> <span class="token string">'love'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>接收 params 参数：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movie-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Movie组件，参数值：{{ this.$route.params.id }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="路由的-props-配置"><a href="#路由的-props-配置" class="header-anchor">#</a> 路由的 props 配置</h3> <p>简化路由组件接收参数。</p> <p>在路由规则中开启 <code>props</code> 传参，组件可以使用 <code>props</code> 接收路由参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/movie/:id/:title'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">component</span><span class="token operator">:</span> Movie<span class="token punctuation">,</span>

  <span class="token comment">// 方式一：该对象中的所有 key-value 都会以 props 的形式传给组件</span>
  <span class="token comment">// 该方式是写死的，少用</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">666</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">}</span>

  <span class="token comment">// 方式二：把 params 参数以 props 的形式传给组件</span>
  <span class="token comment">// 只能接收 params 参数</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token boolean">true</span>

  <span class="token comment">// 方式三：函数写法，啥都能传</span>
  <span class="token function">props</span><span class="token punctuation">(</span><span class="token parameter">$route</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">id</span><span class="token operator">:</span> $route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> $route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>组件接收参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token comment">// 使用 props 接收路由规则的参数项</span>
  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'id'</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Movie组件，参数值：{{ id }}，题目：{{ title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="路由传参注意事项"><a href="#路由传参注意事项" class="header-anchor">#</a> 路由传参注意事项</h3> <ol><li>path 不能和 params 一起使用。path+query、name+query/params 都行</li> <li>如何指定 params 参数可传可不传？</li></ol> <ul><li>若声明了 params 参数 <code>path: '/movie/:title'</code>，默认是必须要传递 params 参数的，否则 URL 会出现问题</li> <li>指定 params 参数可不传：<code>path: '/movie/:title?'</code></li></ul> <ol start="3"><li>已指明 params 参数可传可不传，但如果传递空串，如何解决？</li></ol> <ul><li>传递空串，URL 也会出现问题</li> <li>方法：使用 <code>undefined</code></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'search'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>key <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'search'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token operator">||</span> <span class="token keyword">undefined</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>key <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="路由元信息-meta"><a href="#路由元信息-meta" class="header-anchor">#</a> 路由元信息 meta</h2> <p>在 <code>meta</code> 中可以为路由添加自定义信息：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> About<span class="token punctuation">,</span>
    <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token literal-property property">isAuth</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="路由守卫"><a href="#路由守卫" class="header-anchor">#</a> 路由守卫</h2> <p>路由守卫</p> <p>作用：对路由进行权限控制。</p> <p>分类：全局守卫、独享守卫、组件内守卫</p> <h3 id="全局守卫"><a href="#全局守卫" class="header-anchor">#</a> 全局守卫</h3> <ul><li>全局前置守卫：<code>beforeEach()</code></li> <li>全局后置守卫：<code>afterEach()</code></li></ul> <p>守卫回调函数 3 个形参：</p> <ul><li><code>to</code> ：将要访问的路由的信息对象，即 <code>$route</code></li> <li><code>from</code> ：将要离开的路由的信息对象</li> <li><code>next</code> ：放行函数（后置守卫没有）</li></ul> <p><code>next</code> 函数 3 种调用方式：</p> <ul><li>直接放行：<code>next()</code></li> <li>强制跳转到其他路由：<code>next(/login)</code></li> <li>阻止本次跳转：<code>next(false)</code></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/main'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> token <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span>

    <span class="token keyword">if</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span><span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>title<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 修改网页标题</span>
    document<span class="token punctuation">.</span>title <span class="token operator">=</span> to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>title
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'vue_test'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="独享路由守卫"><a href="#独享路由守卫" class="header-anchor">#</a> 独享路由守卫</h3> <ul><li>某一条路由规则独享的守卫</li> <li>独享守卫只一个</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">component</span><span class="token operator">:</span> About<span class="token punctuation">,</span>
  <span class="token function">beforeEnter</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from <span class="token punctuation">,</span>next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="组件内路由守卫"><a href="#组件内路由守卫" class="header-anchor">#</a> 组件内路由守卫</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'About'</span><span class="token punctuation">,</span>

  <span class="token comment">// 进入守卫：通过路由规则，进入该组件时被调用</span>
  <span class="token function">beforeRouteEnter</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 离开守卫：通过路由规则，离开该组件时被调用</span>
  <span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="各个守卫执行顺序"><a href="#各个守卫执行顺序" class="header-anchor">#</a> 各个守卫执行顺序</h3> <p>从 <code>About</code> 组件通过路由规则进入 <code>Home</code> 组件：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>About-beforeRouteLeave
beforeEach
Home-beforeEnter
Home-beforeRouteEnter
afterEach
Home组件生命周期开始
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="vue-router-4-x"><a href="#vue-router-4-x" class="header-anchor">#</a> vue-router 4.x</h2> <p>目前 <code>vue-router</code> 有 <code>3.x</code> 和 <code>4.x</code> 两个版本，前者只能在 <code>vue2.x</code> 中使用，后者只能在 <code>vue3.x</code> 中使用。</p> <p>下面是 <code>vue-router 4.x</code> 初体验：</p> <p>安装 <code>vue-router 4.x</code> ：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> vue-router@next -S
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>创建路由模块：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 从 vue-router 按需导入两个方法</span>
<span class="token comment">// createRouter：创建路由实例对象</span>
<span class="token comment">// createWebHashHistory：指定路由工作模式为 hash 模式</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHashHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Home <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><code>main.js</code> 导入并挂载路由模块：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token keyword">import</span> <span class="token string">'./index.css'</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----> <div class="comments-wrapper" data-v-4698c43e><!----></div></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-44bd5a18 data-v-44bd5a18><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-44bd5a18><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-44bd5a18></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-44bd5a18></path></svg></div><div></div><!----><canvas id="vuepress-canvas-cursor"></canvas><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://music.163.com/song/media/outer/url?id=115162.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:200px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p2.music.126.net/2oouVh_rHOv1nZXYapF41A==/109951163606358209.jpg" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p2.music.126.net/2oouVh_rHOv1nZXYapF41A==/109951163606358209.jpg);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>月半小夜曲</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>李克勤</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div><div class="Sakura" data-v-248d85d6><canvas id="canvas_sakura" style="z-index:-1;" data-v-248d85d6></canvas></div><canvas id="Ribbon"></canvas><div class="RibbonAnimation"></div></div></div>
    <script src="/xiaoliantongxue/assets/js/app.ebd9f252.js" defer></script><script src="/xiaoliantongxue/assets/js/4.d19b4706.js" defer></script><script src="/xiaoliantongxue/assets/js/1.7b0744f8.js" defer></script><script src="/xiaoliantongxue/assets/js/17.33ec3468.js" defer></script>
  </body>
</html>
